<template>
	<view class="box">
		<!-- #ifdef H5 || MP-WEIXIN -->
		<view class="">
			<uNavbar title="群信息修改" bgColor="transparent"></uNavbar>
			<image class="indexbg"
				src="https://images.fudiemall.com/storage/default/20250411/BG77ff634c5c493fbb0cb752c7b44d86c703900c11.png"
				mode="aspectFill"></image>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<NavTitle title="群信息修改"
			bgimg='https://images.fudiemall.com/storage/default/20250411/BG77ff634c5c493fbb0cb752c7b44d86c703900c11.png'
			:backgroundColor='backgroundColor'></NavTitle>
		<!-- #endif -->

		<view class="wrap_headimg" @click="getheadimg">
			<text>群头像</text>
			<image class="headimg" :src="imgurl" mode="aspectFill"></image>
		</view>
		<view class="modules flex_ld">
			<text>群名称</text>
			<view class="modules_r flex_dq">
				<input type="text"  maxlength="100" :disabled="is_admin==0" :style="{ color: inputColor }" v-model="name" />
				<u-icon name="arrow-right"  color="#A6A5AF" size="14"></u-icon>
			</view>
		</view>
		<view class="modules flex_ld" v-if="is_admin!=0"  @click="gomutelist">
			<text>禁言列表</text>
			<view class="modules_r flex_dq">
				<u-icon name="arrow-right"  color="#A6A5AF" size="14"></u-icon>
			</view>
		</view>
		<view class="modules flex_ld" v-if="is_admin!=0"  @click="goadminlist">
			<text>管理员列表</text>
			<view class="modules_r flex_dq">
				<u-icon name="arrow-right"  color="#A6A5AF" size="14"></u-icon>
			</view>
		</view>
		
		<view class="wrap_item">
			<view class="text">群公告</view>
		</view>
		<view class="textareas">
			<!-- #ifdef H5 -->
			<text class="surplus">{{number||0}}/{{maxlength}}</text>
			<!-- #endif -->

			<textarea class="ipt" :disabled="is_admin==0" v-model.trim="signin" :maxlength="128" placeholder="请输入群公告" />
		</view>
		<view class="btn" v-if="is_admin!=0" @click="submit">

			保存
		</view>

	</view>
</template>

<script>
	import {
		groupDetails,
		updateGroup
	} from "../../api/hx.js"
	import {
		baseURL
	} from "../../utils/request.js"
	export default {
		data() {
			return {
				name: '',
				show: false,

				backgroundColor: "",
				signin: "",
				user: {},
				maxlength: '128',
				imgurl: "",
				sexval: "",
				number: '',
				inputColor: '#A7A4AD', // 初始状态为#fff
				groupid: "",
				detail: {},
				is_admin: ""
			}
		},
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},
		onLoad(option) {
			this.groupid = option.id
			this.getdetail()
		},
		watch: {
			signin(val) {
				this.number = val.length
			}
		},
		methods: {
			gomutelist() {
				uni.navigateTo({
					url: "/pageDao/groupchat/mutelist?id=" + this.groupid
				})
			},
			goadminlist() {
				uni.navigateTo({
					url: "/pageDao/groupchat/adminlist?id=" + this.groupid
				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			submit() {
				updateGroup({
					hx_group_id: this.groupid,
					group_name: this.name,
					avatar: this.imgurl,
					notice: this.signin
				}).then(res => {
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
					uni.$u.toast(res.msg)
					console.log(res)
				})
			},
			getdetail() {
				groupDetails({
					hx_group_id: this.groupid
				}).then(res => {
					if (res.code == 1) {
						this.detail = res.data
						this.is_admin = res.data.group_user_one.is_admin
						this.imgurl = res.data.avatar
						this.name = res.data.name
						this.signin = res.data.notice
					}
					console.log(res)
				})
			},
			getheadimg() {
				if (this.is_admin != 0) {
					uni.chooseImage({
						count: 1,
						sizeType: ['original'],
						formData: {
							'user': 'test'
						},
						success: (chooseImageRes) => {
							console.log(chooseImageRes, "999")
							const tempFilePaths = chooseImageRes.tempFilePaths;
							uni.uploadFile({
								url: baseURL + `shop/common/upload`,
								filePath: tempFilePaths[0],
								name: 'file',
								header: {
									"ba-user-token": uni.getStorageSync("token") || ''
								},
								success: (res) => {
									console.log(res, "99900")

									this.imgurl = JSON.parse(res.data).data.full_url


									//  console.log(JSON.parse(res.data).data.path,"qwdqw") 
									// console.log(res,"上传")
								}
							});
						}
					});
				}
			},



		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 1624rpx;
		background-color: #f7f7f7;

	}

	/deep/.u-navbar__content {
		background: transparent !important;
	}

	.indexbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 460rpx;
		z-index: 1;

	}
	.modules{
		position: relative;
		width: 654rpx;
		margin: 30rpx auto;
		padding: 20rpx 0;
		z-index: 9;
	}
	
	.modules_r>input{
		text-align: right;
	}

	.wrap_headimg {
		width: 750rpx;
		height: 126rpx;
		position: relative;
		// background-color: #f7f7f7;
		margin: 0 auto;
		margin-top: 20rpx;

		>text {
			position: absolute;
			top: 52rpx;
			left: 54rpx;
			font-size: 32rpx;
			color: #333;
		}

		.headimg {
			width: 94rpx;
			height: 94rpx;
			border-radius: 50%;
			position: absolute;
			top: 16rpx;
			right: 78rpx;
		}

		.uni-text {
			position: absolute !important;
			right: 0rpx !important;
		}
	}

	.wrap_item {
		width: 750rpx;
		height: 126rpx;
		position: relative;
		// background-color: #f7f7f7;
		margin: 0 auto;
		display: flex;
		align-items: center;

		.text {
			position: absolute;
			// top: 52rpx;
			left: 54rpx;
			font-size: 32rpx;
			color: #333;
		}

		.sex {
			position: absolute;
			right: 100rpx;
			font-size: 32rpx;
			color: #A7A4AD;
		}

		.phone {
			position: absolute;
			right: 100rpx;
			font-size: 32rpx;
			color: #A7A4AD;

			>image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
		}


		>input {
			position: absolute;
			// top: 52rpx;
			right: 92rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #fff;
			text-align: right;
			// background-color: red;
		}
	}
	.ipt {
		width: 654rpx;
		height: 304rpx;
		background: #f2f2f2;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		margin: 0 auto;
		font-weight: 400;
		font-size: 26rpx;
		color: #333 !important;
		padding: 32rpx;
	}

	.btn {
		position: relative;
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
		border-radius: 332rpx 332rpx 332rpx 332rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	.textareas {
		position: relative;
	}

	.textareas>textarea {
		font-size: 28rpx;
	}

	.surplus {
		position: absolute;
		bottom: 10rpx;
		right: 50rpx;
		font-size: 24rpx;
		color: #333;
		z-index: 999;
	}

	/deep/.uni-input-placeholder {
		color: #A6A5AF !important;
	}

	/* #ifdef MP-ALIPAY */
	/deep/ input {
		background: transparent !important;
	}

	/* #endif */
</style>